﻿@{
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />


<div style="padding: 16px">
    <table class="layui-hide" id="accountList" lay-filter="accountList"></table>
</div>

<script type="text/html" id="toolbartest">
    <div class="layui-btn-container" style="margin-top:5px">
        <div class="layui-input-wrap" style="float:left;width:200px">
            <input type="text" id="name" name="A" value="" placeholder="用户名" class="layui-input">
        </div>
        <div class="layui-btn-container layui-col-xs12" style="float:left;width:500px">
            <button class="layui-btn layui-bg-blue" id="sel" lay-event="sel">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="$('#name').val('')">重置</button>
            <button class="layui-btn layui-btn-success" id="add" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-danger" id="dell" lay-event="dell">删除</button>
        </div>
    </div>
</script>
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
      <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-orange" lay-event="upd">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="del">删除</a>
      <a class="layui-btn layui-btn-xs layui-btn-primary layui-border" lay-event="frole">分配角色</a>
    </div>
</script>

<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>

<script>
    layui.use(function () {
      var table = layui.table;
      

      // 创建渲染实例
      function selAccount(){
        table.render({
        elem: '#accountList',
        url: '/Account/AccountRoleList', // 此处为静态模拟数据，实际使用时需换成真实接口
        toolbar: '#toolbartest',
        defaultToolbar: [],
        height: 'full-50', // 最大高度减去其他容器已占有的高度差
        css: [
          // 重设当前表格样式
          '.layui-table-tool-temp{padding-right: 145px;}',
        ].join(''),
        cellMinWidth: 80,
        page: true,
        cols: [
          [
            { type: 'checkbox', fixed: 'left' },
            {
              field: 'id',
              fixed: 'left',
              width: 80,
              title: 'ID',
            },
            { field: 'accountName', width: 200, title: '账户' },
            {
              field: 'accountNickname',
              width: 200,
              title: '昵称',
            },
            {
              field: 'accounPhone',
              title: '联系方式',
              width: 200,
            },
            {
                field: 'status',
                title: '是否启用',
                width: 100,
                templet: function(d){
                    if(d.status){
                      return '<span style="color: green">启用</span>';
                    } else {
                      return '<span style="color: red">禁用</span>';
                    }
                }
            },
            { field: 'roleName', title: '角色', width: 300 },
            {
              fixed: 'right',
              title: '操作',
              width: 134,
              minWidth: 200,
              templet: '#toolDemo',
            },
          ],
        ],
      });
      }

      //渲染
      selAccount()

      // 触发单元格工具事件
      table.on('tool(accountList)', function (obj) {
        // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        // console.log(obj)
        if (obj.event === 'upd') {
          layer.open({
            title: '编辑用户:' + data.id,
            type: 2,
            area: ['80%', '80%'],
            content: '/Account/Add?id='+ data.id,
            end: function(){
              setTimeout(function() {
                 window.location.reload();
              }, 500); // 每5秒刷新一次
            }
          });
        }
        if (obj.event === 'del') {
            var arr = [];
            arr.push(data.id);
            del(arr);
        }
        if (obj.event === 'frole') {
          layer.open({
            title: '分配角色',
            type: 2,
            area: ['80%', '80%'],
            content: '/Account/Add',
            end: function(){
              setTimeout(function() {
                 window.location.reload();
              }, 500); // 每5秒刷新一次
            }
          });
        }
      });
        // 工具栏事件
      table.on('toolbar(accountList)', function (obj) {
         console.log(111)
         var id = obj.config.id;
         var checkStatus = table.checkStatus(id);
         if (obj.event == 'dell'){
             var a = 1;
             var data = checkStatus.data;
             var arr = data.map((x) => x.id);
             if(arr.length == 0){
                 layer.msg('请选择数据',{icon:2});
                 a = 0;
                 return
             }
             if(a == 1){
                 del(arr)
             }
         }
        if (obj.event === 'sel') {
          table.reload('accountList', {
            page: {
              curr: 1 // 重新从第 1 页开始
            },
            where: {
                name:$("#name").val()
            }
          });
        }
        if (obj.event === 'add') {
          layer.open({
            title: '新增用户',
            type: 2,
            area: ['80%', '80%'],
            content: '/Account/Add?id=0',
            end: function(){
              setTimeout(function() {
                 window.location.reload();
              }, 500); // 每5秒刷新一次
            }
          });
        }
      });

      function del (arr){
          console.log(111,arr.toString());
          layer.confirm('确认要删除吗？', {icon: 3},
            function(){
                $.ajax({
                    url:'/Account/AccountDel',
                    type:'get',
                    data:{
                        ids : arr.toString()
                    },
                    dataType:'text',
                    success:function(res){
                        if(res>0){
                            layer.msg('删除成功', {icon: 1});
                            setTimeout(function() {
                               window.location.reload();
                            }, 500); // 每5秒刷新一次
                        }
                        else{
                            layer.msg('删除失败', {icon: 2});
                        }
                    }
                })
            },
            function(){
              layer.msg('取消成功');
            }
          );
      }
    });
</script>
